<div id="payFee_save">
    <div class="payFee_save">
        <el-row class="table_search">
            <el-col :span="24">
                <template>
                    <el-input style="width: 220px;font-size: 12px" readonly onclick="showJgTree();" v-model="jigouName" id="jgSel" placeholder="请选择机构"></el-input>
                    <div id="jgFeeUserContent" class="jgFeeUserContent" style="display: none;position: absolute;z-index: 1000;overflow: auto;background:#ffffff;">
                        <ul id="jgFeeUserTree" class="ztree" style="margin-top:0; width:220px;"></ul>
                    </div>
                    <el-input style="margin-left: 20px;font-size: 12px"
                              placeholder="请输入用户姓名进行搜索"
                              id="userSea"
                              v-model="parameters.searchContent"
                              clearable>
                    </el-input>
                    <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
                </template>
            </el-col>
        </el-row>
        <el-row class="table_btn" type="flex">
            <el-col :span="3" style="width: 130px">
                <el-button size="small" type="primary" @click="addFeeUser" icon="el-icon-plus">新增人员</el-button>
            </el-col>
            <el-col :span="3" style="position: relative;width: 100px;overflow: hidden">
                    <form id="uploadForm" action="" method="post" enctype="multipart/form-data" name="fileForm" >
                        <input type="file" name="file" id="fileArea" class="inputfile" @change="filesChange"/>
                        <label for="fileArea"><i class="el-icon-upload"></i>&nbsp;&nbsp;批量新增</label>
                    </form>
            </el-col>
            <el-col :span="3" style="width: 110px;margin-left: 34px;">
                <el-button size="small" type="primary" @click="exportFeeUser" icon="el-icon-download">导出</el-button>
            </el-col>
            <el-col :span="3" style="width: 130px">
                <el-button size="small" type="primary" @click="exportTemplate" icon="el-icon-download">下载批量模板</el-button>
            </el-col>
            <el-col :span="3" style="margin-left: 28px;">
                <el-button size="small" type="primary" @click="batchDel" icon="el-icon-delete">批量删除</el-button>
            </el-col>
        </el-row>
        <!--表格-->
        <template>
            <el-table
                    size="mini"
                    :data="tableData"
                    @row-click="handleRow"
                    @cell-mouse-enter="mouseEnterEvent"
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="feeId"
                        label="缴费编号"
                        width="170">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="feeUserName"
                        label="用户姓名"
                        width="170">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="170"
                        prop="telNo"
                        label="联系方式">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="170"
                        prop="deptName"
                        label="机构名称">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="170"
                        prop="status"
                        label="状态">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini"
                                   type="text"
                                   class="btn"
                                   @click="amendFeeUser(scope.$index, scope.row)">{{scope.row.status == "审批中" ?  '审核' : '修改'}}</el-button>
                        <el-button type="text"
                                   size="mini"
                                   class="btn-Del"
                                   @click="deleteRow(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <div class="block footerBox">
                <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :current-page.sync="currentPage"
                        :total="totalCount">
                </el-pagination>
            </div>
        </template>
        <!--新增弹出框-->
        <div class="isShowingBox" v-show="isShowingBox"></div>{{isOverflow}}
        <el-dialog :close-on-click-modal="modalAble" :close-on-press-escape="escAble" title="增加用户" :visible.sync="dialogAddFormVisible" :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :before-close="emptyContent">
            <span class="delDialogBtn" @click="closeAddDialog">x</span>
            <el-form
                    class="add-template-form"
                    :rules="rules"
                    ref="addFeeUserForm"
                    :model="addFeeUserForm"
                    label-width="140px"
                    :label-position="labelPosition">
                <el-form-item label="用户姓名：" prop="feeUserName">
                    <!--<el-input v-model="addFeeUserForm.feeUserName" style="width: 60%;"></el-input>-->
                    <input type="text" v-model="addFeeUserForm.feeUserName" style="width: 60%;" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </el-form-item>
                <el-form-item label="缴费编号：" prop="feeId">
                    <!--<el-input v-model="addFeeUserForm.feeId" style="width: 60%;"></el-input>-->
                    <input type="text" v-model="addFeeUserForm.feeId" style="width: 60%;" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

                </el-form-item>
                <el-form-item label="联系方式：" prop="telNo">
                    <!--<el-input v-model="addFeeUserForm.telNo" style="width: 60%;"></el-input>-->
                    <input type="text" v-model="addFeeUserForm.telNo" style="width: 60%;" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

                </el-form-item>
                <el-form-item label="所属机构：" prop="deptId">
                    <el-input style="width: 60%;" readonly onclick="showAddTree();" v-model="addFeeUserForm.name" id="addSel" placeholder="请选择机构"></el-input>
                    <div id="addFeeUserContent" class="addFeeUserContent" style="display: none;position: absolute;z-index: 1000;overflow: auto;background:#ffffff;">
                        <ul id="addFeeUserTree" class="ztree" style="margin-top:0; width:241px;"></ul>
                    </div>
                </el-form-item>
                <el-form-item label="性别：" prop="sex">
                    <el-select v-model="addFeeUserForm.sex" placeholder="请选择性别" style="width: 60%;">
                        <el-option label='请选择性别' value=""></el-option>
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="身份证号：" prop="cardId">
                    <el-input v-model="addFeeUserForm.cardId" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="家庭地址：" prop="addr">
                    <el-input v-model="addFeeUserForm.addr" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="联系人：" prop="linkMan">
                    <el-input v-model="addFeeUserForm.linkMan" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="联系人电话：" prop="linkPhone">
                    <el-input v-model="addFeeUserForm.linkPhone" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="备注1：" prop="remark1">
                    <el-input v-model="addFeeUserForm.remark1" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="备注2：" prop="remark2">
                    <el-input v-model="addFeeUserForm.remark2" style="width: 60%;"></el-input>
                </el-form-item>
            </el-form>
            <!--底部按钮-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="addCaleForm('addFeeUserForm')">取 消</el-button>
                <el-button type="primary" @click="goConfirm('addFeeUserForm')">确 定</el-button>
            </div>
        </el-dialog>
        <!--修改弹出框-->
        <el-dialog :close-on-click-modal="modalAble" :close-on-press-escape="escAble" title="修改缴费人员信息" :visible.sync="dialogEditFormVisible" :close-on-click-modal="ismodalClose" :show-close="showDelBtn">
            <span class="delDialogBtn" @click="closeAddDialog">x</span>
            <el-form
                    class="add-template-form"
                    :rules="rules"
                    ref="amendFeeUserForm"
                    :model="amendFeeUserForm"
                    label-width="140px"
                    :label-position="labelPosition">
                <el-form-item label="用户姓名：" prop="feeUserName">
                    <!--<el-input v-model="amendFeeUserForm.feeUserName" style="width: 60%;"></el-input>-->
                    <input type="text" v-model="amendFeeUserForm.feeUserName" style="width: 60%;" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

                </el-form-item>
                <el-form-item label="缴费编号：">
                    <!--<el-input readonly v-model="amendFeeUserForm.feeId" style="width: 60%;"></el-input>-->
                    <input type="text" v-model="amendFeeUserForm.feeId" style="width: 60%;" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

                </el-form-item>
                <el-form-item label="联系方式：" prop="telNo">
                    <!--<el-input v-model="amendFeeUserForm.telNo" style="width: 60%;"></el-input>-->
                    <input type="text" v-model="amendFeeUserForm.telNo" style="width: 60%;" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

                </el-form-item>
                <el-form-item label="所属机构：" prop="deptId">
                    <el-input style="width: 60%;" readonly onclick="showAmendTree();" v-model="amendFeeUserForm.deptName" id="amendSel" placeholder="请选择机构"></el-input>
                    <div id="amendFeeUserContent" class="amendFeeUserContent" style="display: none;position: absolute;z-index: 1000;overflow: auto;background:#ffffff;">
                        <ul id="amendFeeUserTree" class="ztree" style="margin-top:0; width:241px;"></ul>
                    </div>
                </el-form-item>
                <el-form-item label="性别：">
                    <el-select v-model="amendFeeUserForm.sex" placeholder="请选择性别" style="width: 60%;">
                        <el-option label='请选择性别' value=""></el-option>
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="0"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="身份证号：" prop="cardId">
                    <el-input v-model="amendFeeUserForm.cardId" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="家庭地址：" prop="addr">
                    <el-input v-model="amendFeeUserForm.addr" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="联系人：" prop="linkMan">
                    <el-input v-model="amendFeeUserForm.linkMan" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="联系人电话：" prop="linkPhone">
                    <el-input v-model="amendFeeUserForm.linkPhone" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="备注1：" prop="remark1">
                    <el-input v-model="amendFeeUserForm.remark1" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="备注2：" prop="remark2">
                    <el-input v-model="amendFeeUserForm.remark2" style="width: 60%;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="amendCaleForm('amendFeeUserForm')">取 消</el-button>
                <el-button type="primary" @click="goConfirm('amendFeeUserForm')">确 定</el-button>
            </div>
        </el-dialog>
        <!--详情弹出框-->
        <el-dialog :close-on-click-modal="modalAble" :close-on-press-escape="escAble" :before-close="emptyContent" class="dialogDetails" title="缴费人员详情" :visible.sync="dialogFeeUserInfoVisible" :close-on-click-modal="ismodalClose" :show-close="showDelBtn">
            <span class="delDialogBtn" @click="closeAddDialog">x</span>
            <div class="info-template-content">
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">用户姓名：</el-col>
                    <el-col :span="19" style="color: #333">{{feeUserInfo.feeUserName}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">缴费编号：</el-col>
                    <el-col :span="19" style="color: #333">{{feeUserInfo.feeId}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">联系方式：</el-col>
                    <el-col :span="19" style="color: #333">{{feeUserInfo.telNo}}</el-col>
                </el-row>
                <el-row class="item-row" >
                    <el-col :span="5" style="color: #666">机构名称：</el-col>
                    <el-col :span="19" style="color: #333">{{feeUserInfo.deptName}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">性别：</el-col>
                    <el-col :span="19" style="color: #333">{{feeUserInfo.sex}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">身份证号：</el-col>
                    <el-col :span="19" style="color: #333">{{feeUserInfo.cardId}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">家庭地址：</el-col>
                    <el-col :span="19" style="color: #333">{{feeUserInfo.addr}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">联系人：</el-col>
                    <el-col :span="19" style="color: #333">{{feeUserInfo.linkMan}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">联系人电话</el-col>
                    <el-col :span="19" style="color: #333">{{feeUserInfo.linkPhone}}</el-col>
                </el-row>
                <el-row class="item-row" >
                    <el-col :span="5" style="color: #666">状态：</el-col>
                    <el-col :span="19" style="color: #333">{{feeUserInfo.status}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">备注1：</el-col>
                    <el-col :span="19" style="color: #333">{{feeUserInfo.remark1}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">备注2：</el-col>
                    <el-col :span="19" style="color: #333">{{feeUserInfo.remark2}}</el-col>
                </el-row>
            </div>
            <!--底部按钮-->
            <!--<div slot="footer" class="dialog-footer">-->
            <!--<el-button @click="dialogFeeUserInfoVisible = false">取 消</el-button>-->
            <!--<el-button type="primary" @click="dialogFeeUserInfoVisible = false">确 定</el-button>-->
            <!--</div>-->
        </el-dialog>
    </div>
</div>
<script>
    $(function () {
        placeHolde("#jgSel","请选择机构");
        placeHolde("#userSea","请输入用户名搜索");
    });

    var layer,
        loadProject;
    layui.use('layer', function(){
        layer = layui.layer;
        loadProject  = layer.load(1, {shade: [0.5, '#000']});

    });

    // 增加页面zTree
    var addSetting = {
        check: {
            enable: true,
            chkStyle: "radio",
            radioType: "all"
//            chkStyle: "checkbox",
//            chkboxType: { "Y": "p", "N": "s" }
        },
        data: {
            simpleData: {
                enable: true,
//                rootId: 0
            }
        },
        callback: {
            beforeClick: beforeClickAdd,
            onCheck: onCheckAdd
        }
    };
    function beforeClickAdd(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("addFeeUserTree");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }
    function onCheckAdd(e, treeId, treeNode) {
        var addTree = $.fn.zTree.getZTreeObj("addFeeUserTree"),
            addNodes = addTree.getCheckedNodes(true),
            checkAdd = [],
            addVal = "";
        for (var i=0, l=addNodes.length; i<l; i++) {
            addVal += addNodes[i].name + ",";
            if(!addNodes[i].isParent){
                checkAdd.push(addNodes[l-1].id);
            }
        }
        if (addVal.length > 0 ) addVal = addVal.substring(0, addVal.length-1);
        payFee_save.addFeeUserForm.name = addVal;
        payFee_save.addFeeUserForm.deptId = checkAdd[0];
//        console.log(payFee_save.addFeeUserForm.name);
//        console.log(payFee_save.addFeeUserForm.deptId);
    }
    function showAddTree() {
        var cityObj = $("#addSel");
        var cityOffset = $("#addSel").offset();
        $("#addFeeUserContent").slideDown("fast");

        $.post("${basePath}merchant/dept/togetDeptTree", function (json) {
            payFee_save.treeArr = '';
            payFee_save.treeArr = json.t;
            var treeObj = $.fn.zTree.init($("#addFeeUserTree"), addSetting, json.t);
        });
        $("body").bind("mousedown", onBodyDown);
    }
    function addHideMenu() {
        $("#addFeeUserContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }

    // 修改页面zTree
    var amendSetting = {
        check: {
            enable: true,
            chkStyle: "radio",
            radioType: "all"
//            chkStyle: "checkbox",
//            chkboxType: { "Y": "p", "N": "s" }
        },
        data: {
            simpleData: {
                enable: true,
//                rootId: 0
            }
        },
        callback: {
            beforeClick: beforeClickAmend,
            onCheck: onCheckAmend
        }
    };
    function beforeClickAmend(treeId, treeNode) {
        var amendTree = $.fn.zTree.getZTreeObj("amendFeeUserTree");
        amendTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }
    function onCheckAmend(e, treeId, treeNode) {
        var amendTree = $.fn.zTree.getZTreeObj("amendFeeUserTree"),
            amendNodes = amendTree.getCheckedNodes(true),
            checkAmend = [],
            amendVal = "";
        for (var i=0, l=amendNodes.length; i<l; i++) {
            amendVal += amendNodes[i].name + ",";
            if(!amendNodes[i].isParent){
                checkAmend.push(amendNodes[l-1].id);
            }
        }
        if (amendVal.length > 0 ) amendVal = amendVal.substring(0, amendVal.length-1);
        payFee_save.amendFeeUserForm.deptName = amendVal;
        payFee_save.amendFeeUserForm.deptId = checkAmend[0];

//        console.log(payFee_save.amendFeeUserForm.deptName);
//        console.log(payFee_save.amendFeeUserForm.deptId);
    }
    function showAmendTree() {
        var cityObj = $("#amendSel");
        var cityOffset = $("#amendSel").offset();
        $("#amendFeeUserContent").slideDown("fast");

        $.post("${basePath}merchant/dept/togetDeptTree", function (json) {
            payFee_save.treeArr = '';
            payFee_save.treeArr = json.t;
            var treeObj = $.fn.zTree.init($("#amendFeeUserTree"), amendSetting, json.t);
        });
        $("body").bind("mousedown", onBodyDown);
    }
    function amendHideMenu() {
        $("#amendFeeUserContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }

    // 当前页机构zTree
    var jgSetting = {
        check: {
            enable: true,
//            chkStyle: "checkbox",
//            chkboxType: { "Y": "p", "N": "s" }
        },
        data: {
            simpleData: {
                enable: true,
//                rootId: 0
            }
        },
        callback: {
            beforeClick: beforeClickJg,
            onCheck: onCheckJg
        }
    };
    function beforeClickJg(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("jgFeeUserTree");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }
    function onCheckJg(e, treeId, treeNode) {
        var jgTree = $.fn.zTree.getZTreeObj("jgFeeUserTree"),
            jgNodes = jgTree.getCheckedNodes(true),
            checkJg = '',
            jgVal = "";
        for (var i=0, l=jgNodes.length; i<l; i++) {
            jgVal += jgNodes[i].name + ",";
            if(!jgNodes[i].isParent){
                checkJg +=  jgNodes[i].id + ',';
            }
        }
        if (jgVal.length > 0 ) jgVal = jgVal.substring(0, jgVal.length-1);
        if (checkJg.length > 0 ) checkJg = checkJg.substring(0, checkJg.length-1);
        payFee_save.jigouName = jgVal;
        payFee_save.parameters.treeId = checkJg;
//        console.log(payFee_save.jigouName);
//        console.log(payFee_save.parameters.treeId);
    }
    function showJgTree() {
        var cityObj = $("#jgSel");
        var cityOffset = $("#jgSel").offset();
        $("#jgFeeUserContent").slideDown("fast");

        $.post("${basePath}merchant/dept/togetDeptTree", function (json) {
            var treeObj = $.fn.zTree.init($("#jgFeeUserTree"), jgSetting, json.t);
        });
        $("body").bind("mousedown", onBodyDown);
    }
    function jgHideMenu() {
        $("#jgFeeUserContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" ||
            event.target.id == "addSel" ||
            event.target.id == "amendSel" ||
            event.target.id == "jgSel" ||
            event.target.id == "addFeeUserContent" ||
            event.target.id == "amendFeeUserContent" ||
            event.target.id == "jgFeeUserContent" ||
            $(event.target).parents("#addFeeUserContent").length>0 ||
            $(event.target).parents("#amendFeeUserContent").length>0 ||
            $(event.target).parents("#jgFeeUserContent").length>0)) {
            addHideMenu();
            amendHideMenu();
            jgHideMenu();
        }
    }

    // 验证手机号（座机号）
    function validateTelNo (rule, value, callback) {
        var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
        var isMob=/^((\+?86)|(\+86))?(13[012356789][0-9]{8}|17[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/;
        if(value === ''){
            callback(new Error('请输入联系方式'));
        }else{
            if((isMob.test(value)) ||(isPhone.test(value))){
                callback();
            }
            else{
                callback(new Error('请输入正确的手机号（座机号）'));
            }
        }
    };
    // 验证缴费编号
    function validateFeeId(rule, value, callback){
        if(value === ''){
            callback(new Error('请输入缴费编号'));
        } else {
            var options = {feeId:payFee_save.addFeeUserForm.feeId};
            sendService('${basePath}merchant/feeUser/checkFeeId',options,function(resData){
                if(resData.status == 'success'){
                    if(resData.msg == '缴费编号已经存在') {
                        callback(new Error('缴费编号已经存在'));
                    }else{
                        callback();
                    }
                }
            });
        }
    };
    var payFee_save =
        new Vue({
            el: "#payFee_save",
            data: {
                modalAble:false,
                escAble:false,
                isShowingBox:false,
                showDelBtn:false,
                ismodalClose:false,
                multipleSelection:[],
                treeArr:'',
                jigouName:'',
                labelPosition:'left',
                dialogAddFormVisible: false,
                dialogEditFormVisible: false,
                dialogFeeUserInfoVisible:false,
                tableData: [],
                feeUserInfo:{}, // 详情
                pageSize:10,
                addFeeUserForm: {
                    name:'',
                    selectId:[],
                    feeUserName:'',//缴费用户名
                    feeId:'',//缴费编号（唯一）
                    telNo:'',//电话
                    deptId:'',//所属商户部门主键
                    sex:'',//性别
                    cardId:'',//身份证
                    addr:'',//地址
                    linkMan:'',//联系人
                    linkPhone:'',//联系电话
                    remark1:'',//标记1
                    remark2:'',//标记2
//                    oneDept:'';//一级机构
//                    twoDept:'';//二级机构

//                    feeUserId:'';//用户主键
//                    corpId:'';//商户主键
//                    status:'';//审批状态 1-生效 0-失效 2-审批中
//                    createDate:'';//创建日期
//                    creator:'';//创建人
//                    updateDate:'';//更新日期
//                    updator:'';//更新人
//                    updateIp:'';//更新ip
//                    isDel:'';//删除标记 0正常 1 无效
                },
                showValidTelNo:false,
                rules: {
                    feeUserName: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { max: 15, message: '15个字符以内', trigger: 'blur' }
                    ],
                    feeId: [
                        { required: true, message: '请填写缴费编号', trigger: 'blur' },
                        { validator: validateFeeId, trigger: 'blur' }
                    ],
                    telNo: [
                        {required: true, message: '请填写联系方式', trigger: 'blur' },
                        { validator: validateTelNo, trigger: 'blur' }
                    ],
                    deptId: [
                        { required: true, message: '请选择末级机构', trigger: 'change,blur' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ]
                },
                formLabelWidth: 'auto',
                amendFeeUserForm: {
                    deptName:'',
                    selectId:[],
                    feeUserName:'',//缴费用户名
                    feeId:'',//缴费编号（唯一）
                    telNo:'',//电话
                    deptId:'',//所属商户部门主键
                    sex:'',//性别
                    cardId:'',//身份证
                    addr:'',//地址
                    linkMan:'',//联系人
                    linkPhone:'',//联系电话
                    remark1:'',//标记1
                    remark2:'',//标记2
                },
                totalCount:'',
                totalPage:'',
                parameters:{
                    'searchContent' : '',
                    'currentPage':'',
                    treeId:'',
                },
                currentPage: 1,
            },
            methods: {
                backHome:function () {
                    this.closeAddDialog();
                },
                /**
                 * 点击X关闭模态框
                 * */
                closeAddDialog:function () {
                    this.isShowingBox = false;
                    if(this.dialogAddFormVisible){
                        this.dialogAddFormVisible = false;
                        this.$refs.addFeeUserForm.resetFields();
                    }else if(this.dialogEditFormVisible){
                        this.dialogEditFormVisible =false;
                        this.$refs.amendFeeUserForm.resetFields();
                    }else if(this.dialogFeeUserInfoVisible){
                        this.dialogFeeUserInfoVisible = false;
                    }
                },
                mouseEnterEvent: function(row, event, column){
                    if(event.label == '操作'){
                        column.style.cursor="default"
                    }
                    if(event.label != '操作'){
                        column.style.cursor="pointer"
                    }
                },
                // 关闭前清空内容before-close
                emptyContent:function(){
//                    this.isShowingBox = false;
                    if(payFee_save.dialogEditFormVisible){
                        payFee_save.dialogEditFormVisible = false;
                        payFee_save.$refs.amendFeeUserForm.resetFields();
                    } else if(payFee_save.dialogAddFormVisible){
                        payFee_save.dialogAddFormVisible = false;
                        payFee_save.$refs.addFeeUserForm.resetFields();
                    } else if(payFee_save.dialogFeeUserInfoVisible){
                        payFee_save.dialogFeeUserInfoVisible = false;
                    }

                },
                // 分页加载数据
                handleCurrentChange: function(currentPage){
                    Pagesearch(this,'${basePath}merchant/feeUser/getFeeUserList2', this.parameters,currentPage,
                        function (resData) {
                            if(resData.status == 'success') {
                                resData.t.forEach(function (item) {
                                    if(item.sex == '0'){
                                        item.sex = '女'
                                    } else if(item.sex == '1'){
                                        item.sex = '男'
                                    }
                                    if(item.status == '0'){
                                        item.status = '失效'
                                    } else if(item.status == '1'){
                                        item.status = '生效'
                                    } else if(item.status == '2'){
                                        item.status = '审批中'
                                    }
                                });
                            }
                        });
                },
                // 搜索按钮
                searchFun: function(){
                    var loadProject233  = layer.load(1, {shade: [0.5, '#000']});
                    if(this.parameters.searchContent == '' && this.parameters.treeId.length ===0) {
                        reloadPage('${basePath}/merchant/feeUser/getFeeUserList');
                    }else {
                        this.parameters.search = '1';
                        Pagesearch(this, '${basePath}merchant/feeUser/getFeeUserList2', this.parameters, 1,
                            function (resData) {
                                if (resData.status == 'success') {
                                    layer.close(loadProject233);
                                    resData.t.forEach(function (item) {

                                        if (item.sex == '0') {
                                            item.sex = '女'
                                        } else if (item.sex == '1') {
                                            item.sex = '男'
                                        }
                                        if(item.status == '0'){
                                            item.status = '失效'
                                        } else if(item.status == '1'){
                                            item.status = '生效'
                                        } else if(item.status == '2'){
                                            item.status = '审批中'
                                        }
                                    });
                                }
                            });
                    }
                },
                // 下载批量模板
                exportTemplate:function () {
                    window.location.href = "${basePath}/merchant/feeUser/getExcelModel";
                },
                // 全选
                handleSelectionChange:function(selection) {
                    this.multipleSelection = selection;
                },
                // 批量删除
                batchDel:function () {
                    var multiplArr = new Array();
                    if(this.multipleSelection.length==0){
                        layer.msg('请选择缴费人员', {icon: 2});
                        return
                    }else if(this.multipleSelection.length>=1){
                        for (var i=0;i<this.multipleSelection.length;i++) {
                            multiplArr.push(this.multipleSelection[i].feeUserId);
                        }
                    }
                    var message = confirm("此操作将永久删除，是否继续？");
                    if(message){
                        var options={"feeuserId" : multiplArr.join(",")};
                        console.log(options);
                        sendService('${basePath}/merchant/feeUser/deleteFeeUser',options,function (resData) {
                            if(resData.status == 'success') {
                                layer.msg(resData.msg, {icon: 2});
                                reloadPage('${basePath}/merchant/feeUser/getFeeUserList');
                            }
                        });
                    }else{
                        layer.msg('已取消删除', {icon: 2});
                    }
                },
                addFeeUser: function () {
                    this.isShowingBox = true;
                    payFee_save.dialogAddFormVisible = true;

                },
                //关闭新增人员页面的弹窗
                addCaleForm: function (formName) {
                    this.isShowingBox = false;
                    payFee_save.dialogAddFormVisible = false;
                    payFee_save.$refs[formName].resetFields();
                },
                //打开修改弹窗
                amendFeeUser: function (index,row) {
                    stopMaoPao();
                    if(row.status !== "审批中"){
                        this.isShowingBox = true;
                        payFee_save.dialogEditFormVisible = true;
                        payFee_save.amendFeeUserForm = row;
                    }else{
                        // 审批功能
                        var options ={"feeuserId":row.feeUserId};
                        sendService('${basePath}/merchant/feeUser/examineFeeUser',options,function (resData){
                            if(resData.status == 'success'){
                                if(resData.msg.indexOf('审批失败！')> -1) {
                                    layer.msg(resData.msg, {icon: 2});
                                }
                                if(resData.msg.indexOf('审批成功！')>-1) {
                                    layer.msg(resData.msg, {icon: 6});
                                    reloadPage('${basePath}/merchant/feeUser/getFeeUserList');
                                }
                            }
                        });
                    }
                },
                //关闭修改页面的弹窗
                amendCaleForm: function (formName) {
                    this.isShowingBox = false;
                    payFee_save.dialogEditFormVisible = false;
                    payFee_save.$refs[formName].resetFields();
                },
                // 打开详情页弹窗
                handleRow: function(row,event,column){
                    if(column.label==='操作' || column.type === 'selection'){
                        return
                    } else {
                       this.isShowingBox = true;
                        payFee_save.dialogFeeUserInfoVisible = true;
                        payFee_save.feeUserInfo = row;
                    }
                },
                // 添加页面 提交功能
                goConfirm: function (formName) {
                    var that = this;
                    if(this.treeArr){
                        if(this.treeArr.length < 2){
                            layer.msg('请先添加机构！', {icon: 2});
                            payFee_save.$refs[formName].resetFields();
                            return
                        }
                    }
                    payFee_save.$refs[formName].validate(
                        function(valid) {
                            if (valid) {
                                if(formName === 'addFeeUserForm'){
                                    var mFuser =  payFee_save.addFeeUserForm;
                                    mFuser.saveOrUpdate = '';
                                    sendService('${basePath}/merchant/feeUser/addOrSaveFeeUser',mFuser,function (resData) {
                                        if(resData.status == 'success'){
                                            if(resData.msg.indexOf('保存成功！')> -1) {
                                                layer.msg(resData.msg, {icon: 6});
                                                // 保存成功后关闭弹窗
                                                payFee_save.dialogAddFormVisible = false;
                                                // 刷新页面
                                                reloadPage('${basePath}/merchant/feeUser/getFeeUserList');
                                            }
                                            if(resData.msg.indexOf('缴费编号已经存在！')>-1) {
                                                payFee_save.$refs[formName].resetFields();
                                                layer.msg(resData.msg, {icon: 2});
                                            }
                                        }
                                    })
                                }else if(formName === 'amendFeeUserForm'){//修改功能
                                    var options = {
                                        'feeUserName':payFee_save.amendFeeUserForm.feeUserName,//缴费用户名
                                        'feeId':payFee_save.amendFeeUserForm.feeId,//缴费编号（唯一）
                                        'telNo':payFee_save.amendFeeUserForm.telNo,//电话
                                        'deptId':payFee_save.amendFeeUserForm.deptId,//所属商户部门主键
                                        'sex':payFee_save.amendFeeUserForm.sex,//性别
                                        'cardId':payFee_save.amendFeeUserForm.cardId,//身份证
                                        'addr':payFee_save.amendFeeUserForm.addr,//地址
                                        'linkMan':payFee_save.amendFeeUserForm.linkMan,//联系人
                                        'linkPhone':payFee_save.amendFeeUserForm.linkPhone,//联系电话
                                        'remark1':payFee_save.amendFeeUserForm.remark1,//标记1
                                        'remark2':payFee_save.amendFeeUserForm.remark2,//标记2
                                        'feeUserId':payFee_save.amendFeeUserForm.feeUserId,//用户主键
                                        'saveOrUpdate':'1'
                                    };
                                    console.log(options);
                                    sendService('${basePath}/merchant/feeUser/addOrSaveFeeUser',options,function (resData) {
                                        if(resData.status == 'success'){
                                            if(resData.msg.indexOf('更新成功！')> -1) {
                                                layer.msg(resData.msg, {icon: 6});
                                                // 修改成功后关闭弹窗
                                                payFee_save.dialogEditFormVisible = false;
                                                // 刷新页面
                                                reloadPage('${basePath}/merchant/feeUser/getFeeUserList');
                                            }
                                            if(resData.msg.indexOf('缴费编号已经存在！')>-1) {
                                                payFee_save.$refs[formName].resetFields();
                                                layer.msg(resData.msg, {icon: 2});
                                            }
                                        }
                                    })
                                }
                            } else {
                                return false;
                            }
                        });
                },
                // 删除
                deleteRow: function (index, row) {
                    stopMaoPao();
                    var message = confirm("是否删除？");
                    if(message){
                        var options ={"feeuserId":row.feeUserId};
                        sendService('${basePath}/merchant/feeUser/deleteFeeUser',options,function (resData) {
                            if(resData.status == 'success') {
                                if(resData.msg.indexOf('未缴费')> -1) {
                                    layer.msg('该用户有未缴费项目不能删除！', {icon: 2});
                                }
                                if(resData.msg.indexOf('成功')>-1) {
                                    layer.msg('删除成功！', {icon: 6});
                                    reloadPage('${basePath}/merchant/feeUser/getFeeUserList');
                                }
                                if(resData.msg.indexOf('失败')>-1) {
                                    layer.msg('删除失败！', {icon: 2});
                                }
                            }
                        });
                    }
                },
                // 导出
                exportFeeUser: function () {
                    window.location.href = "${basePath}/merchant/feeUser/getExPort";
                },
                /**
                 * form表单提交上传文件
                 */
                filesChange:function () {
                    var nameFlis = $("#fileArea").val();
                    var fileName123 = nameFlis.split("\\");
                    var fileName2333 = fileName123[fileName123.length-1];
                    var endName = fileName2333.split(".")[1];
                    if(endName == 'xls' ||endName == 'xlsx' ){
                        this.ajaxSubmitForm();
                    }else {
                        layer.msg('请选择xls、xlsx格式文件上传', {icon: 2});
                    }
                },
                ajaxSubmitForm:function() {
                    var that = this;
                    var option = {
                        url : '${basePath}merchant/feeUserr/readdeptExcel',
                        type : 'POST',
                        dataType : 'json',
                        headers : {"ClientCallMode" : "ajax"}, //添加请求头部
                        success : function(data) {
                            if(data[0].status == 'success'){
                                layer.msg(data[0].msg, {icon: 6});
                                $(".main-right").empty();
                                $(".main-right").load('${basePath}/payPeeIE9');
                            }else{
                                layer.msg(data[0].msg, {icon: 2});
                                $(".main-right").empty();
                                $(".main-right").load('${basePath}/payPeeIE9');
                                return;
                            }
                        },
                        error: function(data) {
                            $(".main-right").empty();
                            $(".main-right").load('${basePath}/payPeeIE9');;
                            layer.msg(data.msg, {icon: 2});
                        }
                    };
                    $("#uploadForm").ajaxSubmit(option);
                    return false;
                },
            },
            created: function () {
                Pagesearch(this,'${basePath}merchant/feeUser/getFeeUserList2', null,1,
                    function (resData) {
                        if(resData.status == 'success'){
                            layer.close(loadProject);
                            resData.t.forEach(function (item) {
                                if(item.sex == '0'){
                                    item.sex = '女'
                                } else if(item.sex == '1'){
                                    item.sex = '男'
                                }
                                if(item.status == '0'){
                                    item.status = '失效'
                                } else if(item.status == '1'){
                                    item.status = '生效'
                                } else if(item.status == '2'){
                                    item.status = '审批中'
                                }
                            });
                        }
                    });
            },
            computed:{
                isOverflow:function () {
                    if(this.isShowingBox){
                        $(".main-right").css({'overflow':"hidden"});
                    }
                    if(!this.isShowingBox){

                        $(".main-right").css({'overflow':"auto"});
                    }

                }
            }
        });
</script>

<style scoped>

    .inputfile {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }
    .inputfile + label {
        height: 32px;
        line-height: 32px;
        font-size: 12px;
        color: #fff;
        padding: 0 14px;
        display: inline-block;
        background-color: #409EFF;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;
        border-radius:3px;
    }
    .inputfile:focus + label,
    .inputfile + label:hover {
        cursor: pointer;
        background: #66b1ff;
        border-color: #66b1ff;
        color: #fff;
    }

    body{
        overflow: visible !important;
    }
    .payFee_save .warningTip{
        position: absolute;
        padding-top: 4px;
        top: 100%;
        line-height: 1;
        left: 0;
        color: #fa5555;
        font-size: 12px;
    }
    .table_search{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    .table_btn{
        height: 60px;
        margin-bottom: 1px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    .el-input{
        width: auto;
    }
    .text-r{
        text-align: right;
    }
    .footerBox {
        width: 100%;
        height: 50px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
        text-align: right;
    }
    #menuContent,#amendFeeUserContent{
        background-color: #eee;
        border: 1px solid #ccc;
    }
    /*详情样式*/
    .el-dialog__body{
        padding: 40px 0 40px 100px;
    }
    .el-dialog__header span {
        padding-left: 20px;
    }
    .el-dialog__headerbtn .el-dialog__close {
        color: #aaa;
        font-size: 22px;
    }
    /*.dialogDetails .el-dialog {*/
        /*overflow: hidden;*/
        /*-webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);*/
        /*-moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);*/
        /*box-shadow: 0 0 16px rgba(0,0,0,0.5);*/
    /*}*/
    .el-dialog__header {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,68,68,1);
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }
    .el-dialog__body {
        padding-top: 75px;
    }
    .dialogDetails .el-dialog__body {
        padding: 50px 0 0 0;
    }
    .dialogDetails .info-template-content .el-row:nth-child(even) {
        background-color: #efefef;
    }
    .dialogDetails .item-row {
        /*height: 46px;*/
        line-height: 46px;
        font-size: 16px;
        padding-left: 60px;
    }
    .dialogDetails .item-row div:first-of-type {
        color: #666;
        text-align: left;
    }
    .dialogDetails .item-row div:last-of-type {
        color: #333;
        padding-right: 10px;
    }
    .dialogDetails .info-template-content .el-row:last-of-type {
        margin-bottom: 30px;
    }
    /*操作按钮*/
    .btn-Del{
        color: #f56c6c;
        width: 40px;
    }
    .btn-Del:hover{
        color: #ffffff;
        background: #f56c6c;
    }
    .btn-Del:active{
        color: #ffffff;
        background: #f56c6c;
    }
    .btn{
        width: 40px;
        color: #409eff;
    }
    .btn:hover{
        background-color: #409eff;
        color: #ffffff;
    }
    .btn:active{
        background-color: #409eff;
        color: #ffffff;
    }
    .layui-btn{
        background-color: #409EFF;
        font-size: 12px;
        height: 34px;
        width: 100px;
        line-height: 34px;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;
        border-radius:3px;
        padding-left: 0;
        padding-right: 0;
    }
    #fileArea{
        /*height: 38px;*/
        /*width: 150px;*/
        /*position: absolute;*/
        /*right: 28px;*/
        /*top: -3px;*/
        /*opacity: 0;*/
    }
</style>
